<template>
  <div class="target_detail">
    <div class="set_start_time">
      用户进入该策略,首次收到策略发出的消息后
      <el-input
        v-model="targetDetailData.timeNum"
        :disabled="operationType == 'check'"
        class="input_time"
      ></el-input>
      <el-select
        v-model="targetDetailData.timeType"
        :disabled="operationType == 'check'"
        placeholder="请选择"
        class="select_time_type"
      >
        <el-option
          v-for="item in dateSelect1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span> 内完成以下事件，则认为策略完成目标转化。</span>
    </div>
    <div class="target_detail_item_box">
      <div
        class="target_detail_item"
        v-for="(item, index) in targetDetailList"
        :key="index"
      >
        <el-select
          v-model="item.contentId"
          :disabled="operationType == 'check'"
          clearable
          style="width: 130px; margin-right: 4px"
          @change="changeItem($event, item, 'contentId')"
        >
          <el-option
            v-for="dict in contentNodeList"
            :key="dict.nodeId"
            :label="dict.nodeName"
            :value="dict.nodeId"
          />
        </el-select>
        <el-select
          v-model="item.ifDid"
          clearable
          :disabled="operationType == 'check'"
          style="width: 110px; margin-right: 4px"
          @change="changeItem($event, item, 'ifDid')"
        >
          <el-option
            v-for="dict in dateSelect2"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        <el-select
          v-model="item.triggerMode"
          clearable
          :disabled="operationType == 'check'"
          prefix-icon="el-icon-search"
          style="width: 140px; margin-right: 4px"
          @visible-change="visibleChangeContent($event, item)"
          @change="changeItem($event, item, 'triggerMode')"
        >
          <el-option
            v-for="dict in dateSelect3showList"
            :key="dict.value"
            :label="dict.label"
            :value="dict"
          />
          <el-option
            v-if="!dateSelect3showList.length && item.triggerMode"
            :label="item.triggerMode.label"
            :value="item.triggerMode"
          />
        </el-select>
        <i
          class="el-icon-close"
          v-show="operationType != 'check'"
          @click="delItem(item)"
        ></i>
      </div>
      <div class="operation">
        <el-button
          type="text"
          icon="el-icon-circle-plus"
          v-show="operationType != 'check'"
          @click="addItem"
          >添加</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { getUuid } from "../../../utils/flowRule";

import mixin from "./mixin";
export default {
  name: "",
  mixins: [mixin],
  inject: ["getFlatRoot"],
  props: ["initialTargetDetailList", "approverConfig"],
  data() {
    return {
      targetDetailData: { timeNum: "", timeType: "1" },
      targetDetailList: [],
      contentNodeList: [],
      contentNodeAllList: [],
      dateSelect2: [
        { value: "1", label: "完成" },
        { value: "2", label: "未完成" },
      ],
      dateSelect3: [
        { value: "1", label: "App推送点击" },
        { value: "2", label: "App激活" },
        { value: "3", label: "App崩溃" },
        { value: "4", label: "APP浏览页面" },
        { value: "5", label: "App点击" },
        { value: "6", label: "App页面浏览" },
        { value: "7", label: "Banner点击" },
      ],
      dateSelect3showList: [],
      dateSelect1: [
        { value: "1", label: "分钟" },
        { value: "2", label: "小时" },
      ],
      operationType: "",
    };
  },
  // watch: {
  //   initialTargetDetailList: {
  //     handler(newVal) {
  //
  //       this.targetDetailList = newVal || [
  //         { id: getUuid(), triggerMode: "", contentId: "", ifDid: "" },
  //       ];
  //     },
  //     immediate: true,
  //   },
  // },
  mounted() {
    this.operationType = this.$route.query.type;
    if (
      this.initialTargetDetailList &&
      this.initialTargetDetailList.list &&
      this.initialTargetDetailList.list.length
    ) {
      this.targetDetailList = [...this.initialTargetDetailList.list];
    } else {
      this.targetDetailList = [
        { id: getUuid(), triggerMode: {}, contentId: "", ifDid: "" },
      ];
    }
    if (this.initialTargetDetailList && this.initialTargetDetailList.data) {
      this.targetDetailData = this.initialTargetDetailList.data;
    } else {
      this.targetDetailData = { timeNum: "", timeType: "1" };
    }

    this.contentNodeList = [];

    this.handleData(this.approverConfig.fatherID);

    // const allNodeList = JSON.parse(localStorage.getItem("allNodeList"));
    // this.getPointList();
    // this.dateSelect3showList = this.dateSelect3;
    console.log(998);
    console.log(this.contentNodeList);

    //获取内容节点
  },
  methods: {
    getPointList(type) {
      if (type) {
        switch (type) {
          case "poster":
            this.dateSelect3 = this.posterPointList;
            break;
          case "article":
            this.dateSelect3 = this.articlePointList;
            break;
          case "offlineActivity":
            this.dateSelect3 = this.offlineActivityPointList;
            break;
          case "onlineActivity":
            this.dateSelect3 = this.onlineActivityPointList;
            break;
          default:
            this.dateSelect3 = [];
        }
      }
    },
    // 给数据加preId(递归)
    handleData(id) {
      let allNodes = this.getFlatRoot();
      let item = allNodes[id];
      if (item && item.type === 2) {
        this.contentNodeList.push(item);
      }
      item.fatherID && this.handleData(item.fatherID);

      // if (data.childNode) {
      //   if (data.childNode && data.childNode.type == 2) {
      //     this.contentNodeAllList.push(data.childNode);
      //   }
      //   this.handleData(data.childNode);
      // } else if (data.conditionNodes && data.conditionNodes.length) {
      //   data.conditionNodes.forEach((element) => {
      //     this.handleData(element);
      //   });
      // }
    },
    changeItem(event, item, type) {
      item[`${type}`] = event;
      const currentItemIdex = this.targetDetailList.findIndex((ele) => {
        return ele.id === item.id;
      });
      if (currentItemIdex === 0 || (currentItemIdex && currentItemIdex != -1)) {
        this.$set(this.targetDetailList, currentItemIdex, item);
      }
    },
    visibleChangeContent(flag, data) {
      if (flag) {
        if (!data.contentId) {
          this.$modal.msgWarning("请选择设置需要设置的内容策略节点");
          return;
        } else {
          let contentData = this.contentNodeList.find((item) => {
            return item.nodeId == data.contentId;
          });
          const contentType =
            contentData &&
            contentData.nodeDetail &&
            contentData.nodeDetail.contentType;
          this.getPointList(contentType);
        }
        console.log(data);
        this.dateSelect3showList = this.dateSelect3.filter((v) =>
          this.targetDetailList.every(
            (val) => val.triggerMode.value !== v.value
          )
        );
      }
    },
    delItem(item) {
      const currentItemIdex = this.targetDetailList.findIndex((ele) => {
        return ele.id === item.id;
      });
      if (currentItemIdex === 0 || (currentItemIdex && currentItemIdex != -1)) {
        this.targetDetailList.splice(currentItemIdex, 1);
      }
    },
    addItem() {
      this.targetDetailList.push({
        id: getUuid(),
        triggerMode: "",
        contentId: "",
        ifDid: "",
      });
    },
    confirm() {
      return {
        data: this.targetDetailData,
        list: this.targetDetailList,
      };
    },
  },
};
</script>
<style lang="less" scoped>
.target_detail {
  .set_start_time {
    font-size: 14px;
    margin: 10px 0;
    // width: 100%;
    // display: inline-flex;
    // align-items: center;
    .input_time {
      width: 50px;
      margin-left: 4px;
    }
    .select_time_type {
      width: 80px;
      margin-right: 4px;
    }
  }
  .target_detail_item_box {
    background-color: #eee;
    padding: 10px;
  }
  .target_detail_item {
    display: inline-flex;
    align-items: center;
    margin-top: 5px;
  }
  .el-select {
    width: 100px;
    margin-right: 4px;
  }
  .operation {
    width: 70%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin-top: 10px;
    span {
      display: inline-flex;
      align-items: center;
      .el-icon-circle-plus {
        margin-right: 5px;
      }
    }
  }
}
</style>
